<template>
  <view class = "content">
    <view class = "p-15 flex column gap-12">
      <!-- 搜索框 -->
      <up-search bgColor = "#ffffff" placeholder = "探索更多龙川好物" height = "55rpx" clearabled inputAlign = "center"></up-search>

      <!-- 轮播图 -->
      <up-swiper :list = "swiperList" height = "250rpx" indicator indicatorModel = "line" :autoplay = 'true'
                 interval = '3000' circular></up-swiper>

      <!-- 瀑布流商品列表 -->
      <up-waterfall v-model = "flowList" class = "waterfall">
        <template v-slot:left = "{ leftList }">
          <view v-for = "(item, index) in leftList" :key = "index" class = "goods-card" @click = 'toast'>
            <image :src = "item.image" mode = "widthFix" class = "goods-image"></image>
            <view class = "goods-info">
              <text class = "goods-title">{{ item.title }}</text>
              <!--              <text class = "goods-price">¥{{ item.price }}</text>-->
              <!--              <text class = "goods-shop">{{ item.shop }}</text>-->
            </view>
          </view>
        </template>

        <template v-slot:right = "{ rightList }">
          <view v-for = "(item, index) in rightList" :key = "index" class = "goods-card" @click = 'toast'>
            <image :src = "item.image" mode = "widthFix" class = "goods-image"></image>
            <view class = "goods-info">
              <text class = "goods-title">{{ item.title }}</text>
              <!--              <text class = "goods-price">¥{{ item.price }}</text>-->
              <!--              <text class = "goods-shop">{{ item.shop }}</text>-->
            </view>
          </view>
        </template>
      </up-waterfall>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import {BASE_URL} from "../../../utils/api";

const shop = '龙川有礼'
const flowList = ref([{price: 115, title: '明信片票根纪念组合', shop, image: `${BASE_URL}/mine/shopping/postcards-tickets.jpg`}, {price: 45, title: '龙川全套明信片', shop, image: `${BASE_URL}/mine/shopping/postcards-all.jpg`}, {price: 60, title: '龙川全套票根', shop, image: `${BASE_URL}/mine/shopping/tickets-all.jpg`}, {price: 30, title: '参参票根', shop, image: `${BASE_URL}/mine/shopping/tickets.jpg`}, {price: 21.5, title: '参参钥匙扣', shop, image: `${BASE_URL}/mine/shopping/can-key.jpg`}, {price: 21.5, title: '苗诗钥匙扣', shop, image: `${BASE_URL}/mine/shopping/miao-key.jpg`}, {price: 21.5, title: '木希钥匙扣', shop, image: `${BASE_URL}/mine/shopping/mu-key.jpg`}, {price: 21.5, title: '青季钥匙扣', shop, image: `${BASE_URL}/mine/shopping/qing-key.jpg`}, {price: 21.5, title: '杉格钥匙扣', shop, image: `${BASE_URL}/mine/shopping/shan-key.jpg`}, {price: 45, title: '参参钥匙扣明信片组合', shop, image: `${BASE_URL}/mine/shopping/can-key-postcard.jpg`}, {price: 45, title: '苗诗钥匙扣明信片组合', shop, image: `${BASE_URL}/mine/shopping/miao-postcard-key.jpg`}, {price: 45, title: '木希钥匙扣明信片组合', shop, image: `${BASE_URL}/mine/shopping/mu-postcard-key.jpg`}, {price: 45, title: '青季钥匙扣明信片组合', shop, image: `${BASE_URL}/mine/shopping/qing-postcard-key.jpg`}])

const swiperList = ref([`${BASE_URL}/mine/bottom-bg.png`, `${BASE_URL}/mine/bottom-bg.png`, `${BASE_URL}/mine/bottom-bg.png`])
const toast = () => {
  uni.showToast({
    title: '更多详情请联系15626064309', icon: 'none', position: 'bottom'
  })
}
</script>

<style scoped lang = "scss">
.content {
  width: 100%;
  min-height: 100vh;
  background-color: #ebf3da;
}

.p-15 {
  padding: 15rpx;
}

.waterfall {
  border-radius: 8px;
  margin: 5px;
  padding: 8px;
  position: relative;
}

.goods-card {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  margin: 10rpx 10rpx 20rpx;
}

.goods-image {
  width: 100%;
  height: auto;
}

.goods-info {
  padding: 16rpx;
}

.goods-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-price {
  font-size: 32rpx;
  color: #ff6b6b;
  font-weight: bold;
  margin: 10rpx 0;
  display: block;
}

.goods-shop {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.bottom-text {
  display: flex;
  justify-content: center;
  color: #999;
  margin-bottom: 10rpx;
  font-size: 20rpx;
}
</style>
